<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <div class="indexTitle">图表展示</div>
                    <div class="contentsize">评分统计</div>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-form ref="form" :model="form" label-width="100px" :inline="true">
                    <el-form-item label="项目：">
                        <el-select v-model="form.projectID" placeholder="请选择项目"  @change="selectChanged">
                            <el-option :label="item.name" :value="item.id" v-for="(item, index) in tableData" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- <div style="float: right">
                        <el-button type="primary" @click="onSearch" icon="el-icon-search" class="searchcolor">查询</el-button>
                    </div> -->
                </el-form>
                <div id="myChart" class="righttop" ref="charts"></div>
                <div v-if="tableDatas.length!=0">
                    <el-table :data="tableDatas" style="width: 100%" border>
                        <el-table-column prop="projectName" label="项目名称" align="center"> </el-table-column>
                        <el-table-column prop="createName" label="创建人" align="center"> </el-table-column>
                        <el-table-column prop="createTime" label="创建时间" align="center">
                            <template slot-scope="scope">
                                {{ scope.row.createTime == null ? '' : scope.row.createTime.slice(0, 10) }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="totalscore" label="总分" align="center"> </el-table-column>
                    </el-table>
                    <div class="pagination" style="float: right">
                        <el-pagination
                            background
                            layout="total,prev, pager, next,jumper"
                            :total="total"
                            :current-page.sync="current"
                            :page-size="pageSize"
                            @current-change="handleCurrentChange"
                        >
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { projectList, scorestatistics, ipageScoreTableapp } from '@/api/index';
export default {
    name: 'echartslist',
    data: function () {
        return {
            form: {},
            projectform: {
                address: '', //项目地址
                beginTime: '', //开工时间
                completionTime: '', //竣工时间
                current: 1, //第几页
                name: '', //项目名称
                pageSize: 1000000 //每页数量
            },
            current: 1,
            pageSize: 10,
            total: 0,
            // 评分表接口获取数据
            scoreform: {
                projectName:'',
                checkScore: '',
                current: 1,
                pageSize: 10,
                userID: localStorage.getItem('userid')
            },
            scorelist: [], //图表数据
            tableData: [], //项目列表
            tableDatas: [] //评分列表
        };
    },
    mounted() {
        this.projectList(this.projectform);
        // this.ipageScoreTableapp(this.scoreform)
    },
    methods: {
        // 分页
        handleCurrentChange(val) {
            this.current = val;
            this.scoreform.current = val;
            this.ipageScoreTableapp(this.scoreform);
        },
        // 项目列表
        projectList(data) {
            projectList(data).then((res) => {
                if (res.code == 200) {
                    this.tableData = res.data.records;
                    this.form.projectID=this.tableData[0].id
                    this.scoreform.projectName =this.tableData[0].name
                    let data={
                        projectID: this.tableData[0].id
                    }
                    this.scorestatistics(data);
                } else {
                    this.tableData = [];
                }
            });
        },
        // 选择框
        selectChanged(e) {
            var that=this
            console.log(e)
            this.tableDatas = [];
            this.current = 1;
            this.scoreform.current = 1;
            this.tableData.map(item=>{
                if(item.id==e){
                    that.scoreform.projectName=item.name
                }
            })
            console.log(this.scoreform)
            let data = {
                projectID: e
            };
            this.scorestatistics(data);
        },
        // 评分表
        scorestatistics(data) {
            scorestatistics(data).then((res) => {
                console.log(res);
                if (res.code == 200) {
                    this.scorelist = res.data;
                    let scoreOptions = res.data;
                    let xnum = [];
                    let ynum = [];
                    scoreOptions.map((mapItem) => {
                        xnum.push(mapItem.tag);
                        ynum.push(mapItem.num);
                    });
                    this.drawLine('评分统计', xnum, ynum);
                }
            });
        },
        // 评分列表
        ipageScoreTableapp(data) {
            ipageScoreTableapp(data).then((res) => {
                if (res.code == 200) {
                    this.tableDatas = res.data.records;
                    this.total = res.data.total;
                } else {
                    this.tableDatas = [];
                    this.total = 0;
                }
            });
        },
        // 获取点击以及数据列表
        drawLine(title, xdata, ydata) {
            console.log(this.$echarts);
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(this.$refs.charts);
            // 绘制图表
            myChart.setOption({
                title: { text: title },
                tooltip: {},
                xAxis: {
                    data: xdata
                },
                yAxis: {},
                series: [
                    {
                        name: '销量',
                        type: 'bar',
                        data: ydata
                    }
                ]
            });
            //让图表自适应
            window.addEventListener('resize', function () {
                myChart.resize(); // myChart 是实例对象
            });
            myChart.getZr().on('click', (params) => {
                let pointInPixel = [params.offsetX, params.offsetY];
                if (myChart.containPixel('grid', pointInPixel)) {
                    let xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0];
                    console.log(xIndex);
                    this.scoreform.checkScore = this.scorelist[xIndex].tag;
                    this.ipageScoreTableapp(this.scoreform);
                }
            });
        }
    }
};
</script>
<style>
</style>
<style scoped>
.righttop {
    margin: auto;
    /* width: 100%;
    height: 100%; */
    width: 600px;
    height: 500px;
}
.container {
    overflow: hidden;
}
.handle-box {
    overflow: hidden;
}
.crumbs {
    background-color: #fff;
    padding: 20px 20px;
}
.indexTitle {
    margin-bottom: 20px;
}
.contentsize {
    font-size: 18px;
    font-weight: 700;
}
</style>

